<template>
  <header>
   <router-link to="/recommend"> <img src="../assets/Logo.png" alt="Logo" /></router-link>
    <span id="header-title">海豚BUS后台管理系统</span>
    <div id="right-container">
      <i></i>
      <el-dropdown>
        <span class="el-dropdown-link">
          <i class="iconfont icon-yonghu-yuan"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人信息</el-dropdown-item>
          <el-dropdown-item>退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
};
</script>

<style scoped>
@import "../assets/css/reset.css";
@import "//at.alicdn.com/t/font_2970792_9up49y0sef.css";

.container2 {
  display: flex;
}
/* 头部导航 */
header {
  height: 4.45rem;
  width: 100%;
  position: relative;
  background-color: rgb(255, 255, 255);
  /* box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.069); */
  border-bottom: 1px solid #ccc;
  z-index: 3;
}
header img {
  vertical-align: middle;
  display: inline-block;
  position: relative;
  left: 3.5rem;
  bottom: 0.3rem;
  height: 3rem;
}
#header-title {
  font-size: 1.8rem;
  line-height: 4.45rem;
  position: relative;
  left: 5rem;
}
.el-dropdown {
  color: black;
  position: absolute;
  right: 1rem;
  top: 1rem;
}
.el-dropdown i {
  font-size: 2.5rem;
}
</style>
